<template>
  <view class="work-container">
    <!-- 宫格组件 -->
    <uni-section title="常用功能" type="line"></uni-section>
    <view class="grid-body" style="min-height: 186px;">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid($event.detail.index,-1)">
        <uni-grid-item v-for="(item,index) in worklist" :key="index" :index="index">
          <view class="grid-item-box">
            <svg-icon :iconClass="item.icon" size="30" />
            <text class="text">{{item.title}}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <view v-for="(section,idx) in routers" :key="idx">
      <!-- 宫格组件 -->
      <uni-section :title="section.title" type="line"></uni-section>
      <view class="grid-body">
        <uni-grid :column="4" :showBorder="false" @change="changeGrid($event.detail.index,idx)">
          <uni-grid-item v-for="(item,index) in section.children" :key="index" :index="index">
            <view class="grid-item-box">
              <uni-icons type="plus-filled" size="22" class="badge" v-if="!item.isfast"></uni-icons>
              <svg-icon :iconClass="item.icon" size="30" />
              <text class="text">{{item.title}}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getRouters
  } from '@/api/login'
  export default {
    data() {
      return {
        worklist: [],
        routers: [],
      }
    },
    onLoad() {
      this.loadData();
    },
    methods: {
      loadData(){
        this.$modal.loading('加载中...')
        this.worklist = this.$store.state.workbench.workbench;
        this.$store.dispatch('GetRouters').then(data => {
          this.routers = data.map(x=>{
              x.children=x.children.map(x=>Object.assign(x,{isfast:!!this.findwork(x)}));
              return x;
            })
          this.$modal.closeLoading()
        }).catch(e => {
          this.$modal.closeLoading()
        })
      },
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(index,idx=0) {
        let work;
        if (idx<0) {
          work = this.worklist[index];
          this.worklist.splice(index,1);
          this.$store.commit('SET_WORKBENCH',this.worklist);
          this.routers.forEach((x,idx)=>{
            x.children.forEach((x,index)=>{
              if(x.path+x.link==work.path+work.link){
                this.routers[idx].children[index].isfast=false
              }
            })
          })
        }else{
          if (!this.routers[idx].children[index].isfast) {
            this.routers[idx].children[index].isfast=true;
            work = Object.assign({},this.routers[idx].children[index]);
            delete work.isfast;
            this.worklist.push(work);
            this.$store.commit('SET_WORKBENCH',this.worklist);
          }
        }
        // 
      },
      findwork(item){
        return this.worklist.find(x=>(x.path+x.link)==(item.path+item.link))??false;
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }
  .badge{
    position: absolute;right:20px;top:10px;
  }
</style>